<html>
    <head>
        <title>WebTSC</title>
        <style>
            textarea {
                width: 95%;
                height: 120px;
                border: 3px solid #cccccc;
                padding: 5px;
                font-family: Tahoma, sans-serif;
            }

            #container {
                width: 100%;
            }

            #header {
                height:50px;
                text-align:center;
            }

            #content {
                text-align:left;
                width:950px;
                min-height:300px;
                margin:0px auto;
            }

            #main {
                float:left;
                width:700px;
            }

            #side{
                float:right;
                width:250px;
                text-align:left;
                padding-top:75px;
            }
        </style>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
        <script language="javascript" src="wscript.js"></script>
        <script language="javascript" src="webtsc.js"></script>
        <script>
            var idx = location.href.lastIndexOf("/");
            var currentDir = location.href.substring("file:///".length, idx);
            function appendText(str) {
                var outputPane = $("#outputPane");
                outputPane.val(outputPane.val() + str);
            }
            var stdOut = {
                WriteLine: function (str) {
                    appendText(str + "\n");
                },
                Write: function (str) {
                    appendText(str);
                },
                Close: function() {}
            };
            var compile = TypeScript.WebTsc.prepareCompiler(currentDir, stdOut, stdOut);
            function doCompile() {
                $("#outputPane").val("");
                var commandLine = $("#commandLine").val();
                compile(commandLine);
                appendText("===done===");
            }
        </script>
    </head>    
    <body>
        <div id="container">
            <div id="header">
                <h1>WebTSC</h1>
            </div>
            <div id="content">
                <div id="main">
                    <h1>Command line:</h1>
                    <textarea id="commandLine"></textarea>
                    <h1>Output:</h1>
                    <textarea id="outputPane"></textarea>
                </div>
                <div id="side">
                    <button onclick="doCompile()">Compile</button>
                </div>
            </div>
        </div>
    </body>
</html>